<template>
  <div>
    <van-sticky>
      <div style="display: flex;align-items: center;justify-content: space-between;padding: 16px 10px;background:#f5f5f5;">
        <div @click="back()">
          <van-icon name="arrow-left" />
        </div>
        <div>班级考勤统计</div>
        <div> </div>
      </div>
      <!-- <van-dropdown-menu active-color="#5D5DEF">
                <van-dropdown-item v-model="searchName" :options="allClass" @change="filterData" />
                <input :value="searchDate" @click="timeShow = true" ></input>
                <van-calendar v-model="timeShow" type="range" allow-same-day :min-date="minDate" :max-date="maxDate" :max-range="3" color="#5D5DEF" @confirm="onConfirm" />
            </van-dropdown-menu> -->
      <van-row style="background:#fff;box-shadow: 0 2px 12px rgba(100,101,102,.12);">
        <van-col span="14">
          <van-search v-model="searchDate" right-icon="calendar-o" left-icon="" readonly
                      placeholder="请选择时间段" @click="timeShow = true"
          />
          <van-calendar ref="alltime" v-model="timeShow" :default-date="defaultDate" allow-same-day :min-date="minDate" :max-range="360"
                        color="#5D5DEF" type="range" @confirm="onConfirm"
          >
          </van-calendar>
        </van-col>
        <van-col span="10" style="padding-top: 5px;border-left: 1px #f3f2f2 solid;">
          <van-dropdown-menu active-color="#5D5DEF">
            <van-dropdown-item v-model="search.class_id " :options="allClass" @change="leaveInfoSub" />
          </van-dropdown-menu> 
        </van-col>
      </van-row>
    </van-sticky>
        
    <van-grid clickable :column-num="2" style="background:#f7f8fa;">
      <van-grid-item icon="home-o" text="全勤率">
        <template #icon>
          <van-circle v-model="fullAttendanceRate" size="72" color="#78bf03" layer-color="#ebedf0" :rate="fullAttendanceRate" :speed="100" :text="fullAttendanceRate+'%'" />
        </template>
      </van-grid-item>
      <van-grid-item icon="search" text="出勤率">
        <template #icon>
          <van-circle v-model="attendanceRate" size="72" layer-color="#ebedf0" :rate="attendanceRate" :speed="100" :text="attendanceRate+'%'" />
        </template>
      </van-grid-item>
    </van-grid>

    <van-collapse v-model="activeNames">
      <van-collapse-item name="1" :value="normalStu.length" :disabled="normalStu.length==0" class="oneType">
        <template #title>
          <div class="statusTilte">
            <van-icon name="friends" color="#78bf03" />全勤人数
          </div>
        </template>
        <van-cell-group>
          <van-cell v-for="(item, index) in normalStu" :key="'1'+index" :title="item.stud_name" icon="user-o" />
        </van-cell-group>
      </van-collapse-item>
      <van-collapse-item title="迟到人数" name="2" :value="lateStu.length" :disabled="lateStu.length==0" class="oneType">
        <template #title>
          <div class="statusTilte">
            <van-icon name="friends" color="#f59a23" />迟到人数
          </div>
        </template>
        <van-cell-group>
          <van-cell v-for="(item, index) in lateStu" :key="'2'+index" :title="item.stud_name" icon="user-o" />
        </van-cell-group>
      </van-collapse-item>
      <van-collapse-item title="" name="3" :value="truantStu.length" :disabled="truantStu.length==0" class="oneType">
        <template #title>
          <div class="statusTilte">
            <van-icon name="friends" color="#d9001b" />旷课人数
          </div>
        </template>
        <van-cell-group>
          <van-cell v-for="(item, index) in truantStu" :key="'3'+index" :title="item.stud_name" icon="user-o" />
        </van-cell-group>
      </van-collapse-item>
      <van-collapse-item title="" name="4" :value="leaveStu.length" :disabled="leaveStu.length==0" class="oneType">
        <template #title>
          <div class="statusTilte">
            <van-icon name="friends" color="#ff3399" />请假人数
          </div>
        </template>
        <van-cell-group>
          <van-cell v-for="(item, index) in leaveStu" :key="'4'+index" :title="item.stud_name" icon="user-o" />
        </van-cell-group>
      </van-collapse-item>
      <!-- <van-collapse-item title="标题2" name="5" icon="shop-o" value="20">
                内容
            </van-collapse-item> -->
    </van-collapse>
  </div>
</template>
<script>
import { Cell, CellGroup, Toast, Icon } from 'vant';
import { Button, Sticky, Empty, Dialog } from 'vant';
import { DropdownMenu, DropdownItem } from 'vant';
import { Popup, Picker } from 'vant';
import { Collapse, CollapseItem } from 'vant';
import { Grid, GridItem ,Calendar } from 'vant';
import { Search,Row, Col,Circle } from 'vant';
 

export default {
  components: {
    [Cell.name]: Cell,
    [CellGroup.name]: CellGroup,
    [Toast.name]: Toast,
    [Button.name]: Button,
    [Sticky.name]: Sticky,
    [Popup.name]: Popup,
    [Picker.name]: Picker,
    [Grid.name]: Grid,
    [GridItem.name]: GridItem,
    [DropdownMenu.name]: DropdownMenu,
    [DropdownItem.name]: DropdownItem,
    [Icon.name]: Icon,
    [Collapse.name]: Collapse,
    [CollapseItem.name]: CollapseItem,
    [Calendar.name]: Calendar,
    [Search.name]: Search,
    [Row.name]: Row,
    [Col.name]: Col,
    [Circle.name]: Circle,
    [Empty.name]: Empty

  },
  data() {
    return {
      errorImg: require("../../assets/img/error.jpg"),
      okImg: require("../../assets/img/ok.jpg"),
      stuList: [],
      searchClass: '',
      searchDate: '',
      search:{
        "class_id": "",
        "begin_date": "",
        "end_date": ""
      },
      timeShow:false,
      allData: [],
      activeNames:[],
      allClass: [
      ],
      minDate: new Date(2010, 0, 1),
      maxDate: '',
      queryInfo: {},
      normalStu:[],
      lateStu:[],
      leaveStu:[],
      truantStu:[],
      attendanceRate:0,
      fullAttendanceRate:0,
      defaultDate:[]

    };
  }, created() {

  }, beforeDestroy() {

  }, mounted() {
    //缓存计划信息
    this.queryInfo = JSON.parse(decodeURI(this.$route.query.parameter));
    console.log(this.queryInfo)
        
    // 日期最大限制
    const date = new Date();
    this.maxDate = new Date(date.getFullYear(), date.getMonth() + 1, date.getDate());

    const allClassObject = JSON.parse(sessionStorage.kLocalClassJson)
    const allClassArray = []
    for (const item in allClassObject) {
      const gradeObj = allClassObject[item]
      const gradeName = gradeObj["grade_name"]
      for (const it in gradeObj['classList']) {
        const obj = { 
          text: gradeName + '-' + gradeObj['classList'][it]["className"],
          value: it 
        }
        allClassArray.push(obj)
      }
    }
    this.allClass=allClassArray
    this.search.class_id = this.queryInfo.classId.toString()
    this.leaveInfoSub()

  }, methods: {
    
    back(){
      window.history.back()
    },
 
    // 格式化日期
    formatDate(date) {
      console.log('要处理的日期')
      console.log(date)
      console.log(`${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`)
      return `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`;
    },
    onConfirm(date){
      const [start, end] = date;
      this.timeShow= false;
      this.searchDate = `${this.formatDate(start)} - ${this.formatDate(end)}`;
        
      this.search.begin_date = `${this.formatDate(start)}`;
      this.search.end_date = `${this.formatDate(end)}`;
      this.leaveInfoSub()
    },
    //查询列表
    async leaveInfoSub() {
      Toast.loading({
        message: '查询中...',
        forbidClick: true,
        overlay: true,
      });
           
      const res = await this.$api.echarts.statis.get(this.search);
      Toast.clear()
      if (res.code === 200) {
        this.normalStu=res.data.fullAttentanceList
        this.lateStu=res.data.lateAttentanceList
        this.truantStu=res.data.truantAttentanceList
        this.leaveStu=res.data.leaveAttentanceList

        this.attendanceRate=res.data.attendanceRate
        this.fullAttendanceRate=res.data.fullAttendanceRate
 
        //this.searchDate = `${res.data.searchBeginDate} - ${res.data.searchEndDate}`;
        this.searchDate = `${this.formatDate(new Date(res.data.searchBeginDate.replace(/\-/g,'/')))} - ${this.formatDate(new Date(res.data.searchEndDate.replace(/\-/g,'/')))}`;
        this.defaultDate = [new Date(res.data.searchBeginDate.replace(/\-/g,'/')),new Date(res.data.searchEndDate.replace(/\-/g,'/'))]
        console.log(this.defaultDate )
        //

      } else {
        Dialog.alert({
          message: res.message,
        })
      }
    }
  }
};
</script>
<style>
.tableTitle .van-grid .van-grid-item .van-grid-item__content {
    background: #dfe0ff;
    color: #3f4851;
    font-weight: bold;
}

.oneStudent:nth-child(odd) {
    background-color: #f1f1f1;
}

.oneStudent:nth-child(odd) .van-grid .van-grid-item .van-grid-item__content {
    background-color: #f8f8f9;
}

.van-grid-item__content {
    padding: 8px 0px;
}

.studentStatus {
    position: absolute;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    right: 1vw;
    top: 3vw;
}

.late {
    background-color: #ff9800;
}

.skippi {
    background-color: #ffa2a3;
}

.compassionate {
    background-color: #4D5EBA;
}

.sickLeave {
    background-color: #FF75A4;
}
.van-dropdown-menu__bar {
    box-shadow: none;
}
.van-grid-item__text {
    font-weight: bold;
}
.oneType  .van-hairline--top-bottom::after, .van-hairline-unset--top-bottom::after{
    border: 0;
}
.oneType .van-collapse-item__content {
    padding-top: 0;
}
.statusTilte {
    font-weight: bold;
    display: flex;
    align-items: center;
    i {
        margin-right: 3px;
        font-size: 18px;
    }
}
</style>